/**
 * Created by FreezeSoul on 2017/8/11.
 */
'use strict';
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryJcarousel',
    'css!app/plugins/controls/common/carousel/resource/jcarousel.basic.css'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_I',
                name: '图片资源I',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_I',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_II',
                name: '图片资源II',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_II',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_III',
                name: '图片资源III',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_III',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IV',
                name: '图片资源IV',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IV',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_V',
                name: '图片资源V',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_V',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VI',
                name: '图片资源VI',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VI',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VII',
                name: '图片资源VII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_VIII',
                name: '图片资源VIII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VIII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_IX',
                name: '图片资源IX',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IX',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_RESOURCE_X',
                name: '图片资源X',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_X',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_CONTROL_ALIGN',
                name: '按钮对齐方式',
                enable: false,
                type: 'select',
                value: 'left',
                default: 'left',
                data: [{
                    value: 'left',
                    text: 'left'
                }, {
                    value: 'right',
                    text: 'right'
                }, {
                    value: 'center',
                    text: 'center'
                }],
                link: 'controlAlign',
                tooltip: '按钮对齐方式'
            },
            {
                group: '基础',
                id: 'J_IMAGE_HIDE_TOOLS',
                name: '是否隐藏按钮',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'hideTools',
                tooltip: '是否隐藏按钮，隐藏后可通过API控制'
            },
            {
                group: '基础',
                id: 'J_IMAGE_INTERVAL',
                name: '图片切换频率',
                enable: false,
                type: 'number',
                value: 3,
                default: 3,
                link: 'interval',
                tooltip: '图片切换频率-秒'
            },
            {
                group: '基础',
                id: 'J_IMAGE_AUTO_START',
                name: '是否自动播放',
                enable: false,
                type: 'checked',
                value: true,
                default: true,
                link: 'autostart',
                tooltip: '是否自动播放幻灯'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var carousel = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._jcarouselId = 'jcarousel_' + Util.newUUID();
            this._jcarouseScroll = null;
            this._currentIndex = null;
            this._option = {
                Binding: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl_I: "",
                    imageUrl_II: "",
                    imageUrl_III: "",
                    imageUrl_IV: "",
                    imageUrl_V: "",
                    imageUrl_VI: "",
                    imageUrl_VII: "",
                    imageUrl_VIII: "",
                    imageUrl_IX: "",
                    imageUrl_X: "",
                    controlAlign: "left",
                    interval: 3,
                    autostart: true,
                    hideTools: false,
                    clickScript: '',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _render: function () {
            if (this._jcarouseScroll) {
                this._jcarouseScroll.stop();
            }
            $(this._container).empty();
            var _this = this;
            var htmlStr = '<div class="jcarousel-wrapper">';
            htmlStr += '<div class="jcarousel ' + this._jcarouselId + '">';
            htmlStr += '<ul>';
            var rootPath = "static/resource/";
            var imagePathArry = [
                this._option.Option.imageUrl_I,
                this._option.Option.imageUrl_II,
                this._option.Option.imageUrl_III,
                this._option.Option.imageUrl_IV,
                this._option.Option.imageUrl_V,
                this._option.Option.imageUrl_VI,
                this._option.Option.imageUrl_VII,
                this._option.Option.imageUrl_VIII,
                this._option.Option.imageUrl_IX,
                this._option.Option.imageUrl_X
            ];
            $.each(imagePathArry, function (i, path) {
                if (path) {
                    var imageUrl = adConfig.baseServiceUrl + rootPath + path;
                    htmlStr += '<li><img class="carousel_img" data-index="' + (i + 1) + '" src="' + imageUrl + '" ' +
                        'width="' + $(_this._container).width() + 'px" ' +
                        'height="' + $(_this._container).height() + 'px"/></li>';
                }
            });
            htmlStr += '</ul>';
            htmlStr += '</div>';
            htmlStr += '<a href="#" class="jcarousel-control-prev">&lsaquo;</a>';
            htmlStr += '<a href="#" class="jcarousel-control-next">&rsaquo;</a>';
            htmlStr += '<p class="jcarousel-pagination">';
            htmlStr += '</p>';
            htmlStr += '<div class="controller"></div>';
            htmlStr += '</div>';
            var $element = $(htmlStr);
            $element.appendTo($(this._container));
            var $jcarousel = $('.' + this._jcarouselId);
            var interval = this._option.Option.interval ? this._option.Option.interval : 3;
            var autostart = this._option.Option.autostart === undefined ? true : this._option.Option.autostart;
            $jcarousel.jcarousel({
                wrap: 'circular'
            })
                .jcarouselAutoscroll({
                    interval: interval * 1000,
                    target: '+=1',
                    autostart: autostart
                });//.jcarouselAutoscroll('start');

            this._jcarouseScroll = $jcarousel.data("jcarouselAutoscroll");

            $element.find('.jcarousel-control-prev')
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .jcarouselControl({
                    target: '-=1'
                });

            $element.find('.jcarousel-control-next')
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .jcarouselControl({
                    target: '+=1'
                });

            $.each($element.find('.jcarousel-control-prev,.jcarousel-control-next'), function (i, a) {
                $(this).removeAttr("href");
            });


            $element.find('.jcarousel-pagination')
                .on('jcarouselpagination:active', 'a', function () {
                    $(this).addClass('active');
                })
                .on('jcarouselpagination:inactive', 'a', function () {
                    $(this).removeClass('active');
                }).jcarouselPagination({
                'item': function (page, carouselItems) {
                    if (_this._option.Option.hideTools === true)
                        return "";
                    return '<a>' + page + '</a>';
                }
            })
                .css({
                    "width": "100%",
                    "padding": "15px",
                    "margin": "0",
                    "left": "0",
                    "text-align": _this._option.Option.controlAlign ? _this._option.Option.controlAlign : "left"
                });

            $element.find(".controller").addClass(autostart ? "play" : "stop").click(function () {
                if ($(this).hasClass("play")) {
                    $(this).removeClass("play").addClass("stop");
                    _this._jcarouseScroll.stop();
                } else {
                    $(this).removeClass("stop").addClass("play");
                    _this._jcarouseScroll.start();
                }
            });

            $element.find("img.carousel_img").on("click", function (e) {
                _this._currentIndex = $(this).data("index");
                if (_this._option.Option
                    && _this._option.Option.clickScript) {
                    Util.evalJavaScript(_this, _this._option.Option.clickScript);
                }
            });

            if (this._option.Option.hideTools === true) {
                $element.find(".controller,.jcarousel-control-prev,.jcarousel-control-next").hide();
            }

            this.ScrollNext = function () {
                $jcarousel.jcarousel('scroll', '+=1');
            };

            this.ScrollPrev = function () {
                $jcarousel.jcarousel('scroll', '-=1');
            };

            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);
            return $element;
        },
        example: function () {
            try {
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setData: function (data) {
            try {
                this._readProperty();
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                this._jcarouseScroll.stop();
                $(this._element).remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: carousel,
        Property: property
    };
});